<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            margin-top: 50px;
            margin-left: 100px;
        }
        textarea{
        	width: 300px;
        	height: 100px;
        }
    </style>
</head>
<body>
    <button class="calcbtn easycalc addFunc">加</button>
    <button class="calcbtn easycalc cutFunc">减</button>
    <button class="calcbtn easycalc multiFunc">乘</button>
    <button class="calcbtn easycalc divisionFunc">除</button>
    <button class="calcbtn abs">绝对值</button>
    <button class="calcbtn pow2">平方</button>
    <button class="calcbtn pow-2">开方</button><br/>
    <textarea id="logicScript" type="text" placeholder="请点击上方辅助按钮或直接输入计算方法"></textarea><br>
    <input type="text" id="text">
    <button id="insertbtn">点击插入文本</button>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(function(){
            $('.calcbtn').on('click',function(){
                if($(this).hasClass('easycalc')){
                    if($(this).hasClass('addFunc')){
                        var str = '+';
                    }else if($(this).hasClass('cutFunc')){
                        var str = '-';
                    }else if($(this).hasClass('multiFunc')){
                        var str = '*';
                    }else if($(this).hasClass('divisionFunc')){
                        var str = '/';
                    }
                    var oriStr = $('#logicScript').val();
                    $('#logicScript').val(oriStr+str);
                    $('#logicScript')[0].focus();
                }else if($(this).hasClass('abs')){
                    var str = 'abs()';
                    handlelogicScript(str,-1);
                }else if($(this).hasClass('pow2')){
                    var str = 'pow(,2)';
                    handlelogicScript(str,-3);
                }else if($(this).hasClass('pow-2')){
                    var str = 'sqrt()';
                    handlelogicScript(str,-1);
                }
            })
            $('#insertbtn').on('click',function(){
                var myField = $('#logicScript')[0];
                var myValue = $('#text').val();
                insertAtCursor(myField,myValue);
            })
        // 设置光标位置
        function setCaretPosition(textDom, pos){
            if(textDom.setSelectionRange){//chrome/firefox
                textDom.focus();
                textDom.setSelectionRange(pos,pos);
            }else if (textDom.createTextRange) {//IE
                var range = textDom.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        }
        //获取光标的位置
        function getCursortPosition(textDom){
            var cursorPos = 0;
            cursorPos = textDom.selectionStart;
            return cursorPos;
        }
        //处理显示的内容
        function handlelogicScript(str,offset){
            var oriStr = $('#logicScript').val();
            $('#logicScript').val(oriStr+str);
            var target = $('#logicScript')[0]
            target.focus();
            console.log(target)
            //获取光标最初的位置(末尾)
            var oriPos = getCursortPosition(target);
            console.log(oriPos)
            //设置光标真正的位置
            var pos = oriPos+offset;
            setCaretPosition(target,pos);
        }

        //在光标后插入文本
        function insertAtCursor(myField, myValue) {
            //IE 浏览器  
            if (document.selection) {  
                myField.focus();  
                sel = document.selection.createRange();
                sel.text = myValue;  
                sel.select();  
            }
             //FireFox、Chrome等  
            else if (myField.selectionStart || myField.selectionStart == '0') {  
                var startPos = myField.selectionStart;  
                var endPos = myField.selectionEnd; 
                // 保存滚动条  
                var restoreTop = myField.scrollTop;  
                myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);  
                if (restoreTop > 0) {  
                    myField.scrollTop = restoreTop;  
                }  
                myField.focus();  
                myField.selectionStart = startPos + myValue.length;  
                myField.selectionEnd = startPos + myValue.length;
            } else {  
                myField.value += myValue;
                myField.focus();
            }  
        }  
    })
</script>
</body>
</html>